<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="top">
      <input @click="search" type="text" name="" id="">
    </div>
    <div class="left">
      <p @click="pClick(item,index)" v-for="(item,index) in dataList" :key="index" :class="nowIndex === index ? 'active':''">
        {{item.title}}
      </p>
    </div>
    <div  class="right">
        <Item  :group="getList"></Item>
    </div>
    <div @click="shopList" class="box">
      购物车
    </div>
    <span class="span" v-if="$store.state.classfy.caradd.length>0">
      {{$store.state.classfy.caradd.length}}
    </span>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Item from '@/components/item/index.vue'
export default {
  name: 'DataList',
  components:{
    Item
  },
  data() {
    return {
      msg: '测试',
      dataList:[],
      getList:[],
      nowIndex:null
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      this.getNavList()
  },
  // Vue方法定义
  methods: {
      getNavList(){
        this.$store.dispatch('classfy/getNavList',{}).then((res)=>{
          this.dataList = res.data
        })
      },
      search(){
        this.$router.push({path:'/search'})
      },
      pClick(item,index){
        this.nowIndex = index;
        this.getList= item
      },
      shopList(){
        this.$router.push({path:'/shopList'})
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.top{
  height:40px;
}
.left{
  width: 100px;
  height:calc(100vh - 100px);
  overflow-y:auto;
  float:left;
  background: rgb(241, 240, 240);
  text-align: center;
  line-height: 50px;
}
.right{
  width: calc(100vw - 100px);
  height:calc(100vh - 100px);
  overflow-y:auto;
  float:left;
}
.active{
  color:red;
}
.box{
  width:80px;
  height:80px;
  position: fixed;
  bottom: 60px;
  border: 1px solid orange;
  border-radius:50%;
  text-align: center;
  line-height: 80px;
}
.span{
  width:15px;
  height:15px;
  display: inline-block;
  border: 1px solid red;
  position: fixed;
  bottom: 115px;
  left:60px;
  border-radius:15px;
  text-align: center;
  line-height: 15px;
}
</style>